<template>
  <div id="app">
    <n-config-provider
      :theme="configStore.theme === 'white' ? null : darkTheme"
      :locale="configStore.config.language"
      :date-locale="configStore.config.date"
    >
      <n-dialog-provider>
        <n-message-provider>
          <router-view v-slot="{ Component, route }">
            <keep-alive v-if="route.meta.keepAlive">
              <component :is="Component"></component>
            </keep-alive>
            <component
              v-else
              :is="Component"
            ></component>
          </router-view>
        </n-message-provider>
      </n-dialog-provider>
    </n-config-provider>
  </div>
</template>

<script setup lang="ts">
import { configStore as store } from '@/store/index'
import { darkTheme } from 'naive-ui'
// import type { GlobalTheme } from 'naive-ui'
// const theme = ref<GlobalTheme | null>(null)
const configStore = store()
</script>

<style lang="less">
.n-config-provider {
  height: 100%;
  width: 100%;
}
</style>
